'use strict'
import React from 'react'
import ReactDom from 'react-dom'
import '../scss/panelPop.scss'
import BasicInfo from './panel/basicInfo'
import Interface from './panel/interface'
import RoutePanel from './panel/routePanel'
import Bag from './panel/bag'
import NpcPanel from './panel/npcPanel'
import TaskPanel from './panel/task'
import Battle from './panel/battle'

class PanelPop {
    constructor() {}
    close() {
        ReactDom.unmountComponentAtNode(document.getElementById('panelPop'))
        $('#panelPop').remove()
    }
    openPanel(name, opts) {
        opts = opts || {}
        let node
        switch (name) {
            case 'basicInfo':
                node = <BasicInfo opts={opts}/>
                break;
            case 'routePanel':
                node = <RoutePanel opts={opts}/>
                break;
            case 'interface':
                node = <Interface opts={opts}/>
                break;
            case 'bag':
                node = <Bag opts={opts}/>
                break;
            case 'npcPanel':
                node = <NpcPanel opts={opts}/>
                break;
            case 'task':
                node = <TaskPanel opts={opts}/>
                break;
            case 'battle':
                node = <Battle opts={opts}/>
                break;
            default:
                console.log('界面不存在');
                return
        }

        if (!document.getElementById('panelPop')) {
            $('body').append('<div id="panelPop"></div>')
        }

        ReactDom.render(
            <div className="panelPop flex jc-center ai-center">
            <div className="bg" onClick={this.close}></div>
            <div className="content">{node}</div>
        </div>, document.getElementById('panelPop'))
    }
}

export let panelPop = new PanelPop()
